"use client";
import { Edit, useForm } from "@refinedev/antd";
import { Form, Input, InputNumber, Radio, Select, TreeSelect, Row, Col } from "antd";
import { useEffect, useState } from "react";
import { getMenuList } from "@/common/api/menu_action";
import { IconSelector } from "@/components/icon-selector";

export default function MenuEdit() {
  const { formProps, saveButtonProps, form } = useForm({
    resource: "system/menu",
  });
  const [treeData, setTreeData] = useState<any[]>([]);
  const [menuType, setMenuType] = useState<string>('M');

  useEffect(() => {
    getMenuList().then((res: any) => {
      const list = res?.data ?? res;
      const convert = (arr: any[]): any[] => arr.map((item: any) => ({
        title: item.menu_name,
        value: item.menu_id,
        children: item.children ? convert(item.children) : undefined
      }));
      setTreeData([{ title: '顶级菜单', value: 0, children: convert(list) }]);
    });
  }, []);

  // 监听菜单类型变化
  const handleMenuTypeChange = (e: any) => {
    setMenuType(e.target.value);
    // 切换类型时重置部分字段
    if (e.target.value === 'M') {
      form.setFieldsValue({ component: undefined, perms: undefined, route_name: undefined, query: undefined });
    } else if (e.target.value === 'C') {
      form.setFieldsValue({ perms: undefined });
    } else if (e.target.value === 'F') {
      form.setFieldsValue({ icon: undefined, path: undefined, component: undefined, route_name: undefined, is_frame: 1, visible: '0', query: undefined });
    }
  };

  return (
    <Edit saveButtonProps={saveButtonProps}>
      <Form {...formProps} layout="horizontal" labelCol={{ span: 5 }}>
        {/* 上级菜单单独一行 */}
        <Form.Item name="parent_id" label="上级菜单">
          <TreeSelect
            treeData={treeData}
            treeDefaultExpandAll={false}
            allowClear
            showSearch
            placeholder="请选择上级菜单"
            style={{ width: '100%' }}
          />
        </Form.Item>
        {/* 菜单类型单独一行 */}
        <Form.Item name="menu_type" label="菜单类型" rules={[{ required: true }]}>
          <Radio.Group onChange={handleMenuTypeChange}>
            <Radio value="M">目录</Radio>
            <Radio value="C">菜单</Radio>
            <Radio value="F">按钮</Radio>
          </Radio.Group>
        </Form.Item>
        {/* 目录类型 */}
        {menuType === 'M' && (
          <Row gutter={16}>
            <Col span={12}>
              <Form.Item name="icon" label="菜单图标">
                <IconSelector />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item name="order_num" label="排序" initialValue={0}>
                <InputNumber min={0} style={{ width: '100%' }} />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item name="menu_name" label="名称" rules={[{ required: true }]}> 
                <Input /> 
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item name="is_frame" label="是否外链">
                <Radio.Group>
                  <Radio value={0}>是</Radio>
                  <Radio value={1}>否</Radio>
                </Radio.Group>
              </Form.Item>
            </Col>
            {/* 权限字符 */}
            <Col span={12}>
              <Form.Item name="perms" label="权限字符">
                <Input />
              </Form.Item>
            </Col>
            {/* 路由地址 */}
            <Col span={12}>
              <Form.Item name="path" label="路由地址">
                <Input />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item name="visible" label="显示状态">
                <Select options={[{ label: '显示', value: '0' }, { label: '隐藏', value: '1' }]} />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item name="status" label="菜单状态">
                <Select options={[{ label: '正常', value: '0' }, { label: '停用', value: '1' }]} />
              </Form.Item>
            </Col>
          </Row>
        )}
        {/* 菜单类型 */}
        {menuType === 'C' && (
          <Row gutter={16}>
            <Col span={12}>
              <Form.Item name="icon" label="菜单图标">
                <IconSelector />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item name="order_num" label="排序" initialValue={0}>
                <InputNumber min={0} style={{ width: '100%' }} />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item name="menu_name" label="名称" rules={[{ required: true }]}> 
                <Input /> 
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item name="route_name" label="路由名称">
                <Input />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item name="is_frame" label="是否外链">
                <Radio.Group>
                  <Radio value={0}>是</Radio>
                  <Radio value={1}>否</Radio>
                </Radio.Group>
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item name="path" label="路由地址">
                <Input />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item name="component" label="组件地址">
                <Input />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item name="perms" label="权限字符">
                <Input />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item name="query" label="路由参数">
                <Input />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item name="visible" label="显示状态">
                <Select options={[{ label: '显示', value: '0' }, { label: '隐藏', value: '1' }]} />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item name="status" label="菜单状态">
                <Select options={[{ label: '正常', value: '0' }, { label: '停用', value: '1' }]} />
              </Form.Item>
            </Col>
          </Row>
        )}
        {/* 按钮类型 */}
        {menuType === 'F' && (
          <Row gutter={16}>
            <Col span={12}>
              <Form.Item name="order_num" label="排序" initialValue={0}>
                <InputNumber min={0} style={{ width: '100%' }} />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item name="menu_name" label="名称" rules={[{ required: true }]}> 
                <Input /> 
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item name="perms" label="权限字符">
                <Input />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item name="status" label="菜单状态">
                <Select options={[{ label: '正常', value: '0' }, { label: '停用', value: '1' }]} />
              </Form.Item>
            </Col>
          </Row>
        )}
      </Form>
    </Edit>
  );
} 